<template>
  <div>
    <n-grid :x-gap="20">
      <n-grid-item :span="5">
        <ul class="center-menu">
          <li
              v-for="(item, index) in menus"
              :key="index"
              :class="{ active: item.name === activeName }"
              @click="navigate(item)"
          >
            {{ item.title }}
          </li>
        </ul>
      </n-grid-item>

      <n-grid-item :span="19">
        <div class="bg-white rounded mb-10 min-h-[75vh]">
          <NuxtPage :page-key="pageKey"></NuxtPage>
        </div>
      </n-grid-item>
    </n-grid>
  </div>
</template>

<script setup>
// 引入Composition API
import {computed} from "vue";

// 引入naive-ui 组件
import {NGrid, NGridItem} from "naive-ui";

// 路由实例
const route = useRoute();

// 计算路由属性
const pageKey = computed(() => route.fullPath);

// 选中路由Name
const activeName = computed(() => route.name);

// 路由列表
const menus = [
  {
    title: "学习记录",
    name: "user-history-page",
  },
  {
    title: "购买记录",
    name: "user-buy-page",
  },
  {
    title: "我的考试",
    name: "user-test-page",
  },
  {
    title: "我的帖子",
    name: "user-post-page",
  },
  {
    title: "优惠券记录",
    name: "user-coupon-page",
  },
  {
    title: "我的收藏",
    name: "user-fava-page",
  },
  {
    title: "修改资料",
    name: "user-edit",
  },
  {
    title: "修改密码",
    name: "user-password"
  },
  {
    title: "其他设置",
    name: "user-other"
  },
];

// 左侧栏跳转事件
const navigate = (item) => {
  navigateTo({
    name: item.name,
    params: {
      page: 1,
    },
  });
};

// 为您的页面组件定义元数据。
definePageMeta({
  middleware: ["auth"],
});
</script>

<style>
.center-menu {
  @apply list-none bg-white rounded;
}

.center-menu li {
  @apply px-5 py-3 text-sm cursor-pointer hover:(bg-blue-50);
}

.center-menu .active {
  @apply text-blue-500 font-bold bg-gray-200;
}
</style>
